<template>
  <div class="drawer">
    <div class="drawer-info">
      <div class="drawer-info-status">
        <span v-if="data.status === 0" class="status-created">{{ $t('message.status.created') }}</span>
        <span v-if="data.status === 1" class="status-enabled">{{ $t('message.status.succeed') }}</span>
        <span v-if="data.status === 2" class="status-failed">{{ $t('message.status.failed') }}</span>
        <span v-if="data.status === 3" class="status-waiting">{{ $t('message.status.waiting') }}</span>
        <span v-if="data.status === 4" class="status-processing">{{ $t('message.status.processing') }}</span>
        <span v-if="data.status === 5" class="status-ignored">{{ $t('message.status.ignored') }}</span>
      </div>
      <ol>
        <li>{{ $t('task.topic') }}: <span>{{ data.topic }}</span></li>
        <li>{{ $t('task.tag') }}: <span>{{ data.tag }}</span></li>
        <li>{{ $t('message.delay.seconds') }}: <span>{{ data.delay_seconds }}</span> {{ $t('unit.second') }}</li>
        <li>{{ $t('message.hash') }}: <span>{{ data.hash }}</span></li>
        <li>{{ $t('message.duration') }}: <span>{{ data.duration }}</span> {{ $t('unit.second.milli') }}</li>
        <li>{{ $t('message.time') }}: <span>{{ data.message_time }}</span></li>
        <li v-if="data.trace_id !== ''">{{ $t('message.trace.id') }}: <span>{{ data.trace_id }}</span></li>
      </ol>
    </div>
    <div v-if="data.message_id !== ''" class="drawer-item">
      <div class="drawer-label">
        <label>{{ $t('message.id') }}</label>
      </div>
      <div class="drawer-code">
        <pre class="success">{{ data.message_id }}</pre>
      </div>
    </div>
    <div class="drawer-item">
      <div class="drawer-label">
        <label>{{ $t('message.body') }}</label>
      </div>
      <div class="drawer-code">
        <pre class="normal">{{ data.message_body }}</pre>
      </div>
    </div>
    <div v-if="data.response_error !== ''" class="drawer-item">
      <div class="drawer-label">
        <label>{{ $t('message.response.error') }}</label>
      </div>
      <div class="drawer-code">
        <pre class="normal">{{ data.response_error }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: {
        message_body: '',
        message_time: '',
        response_error: '',
        trace_id: ''
      }
    }
  },
  methods: {
  },
  mounted () { this.data = this.origin },
  name: 'DetailServlets',
  props: { origin: { type: Object, required: true } },
  watch: { origin: { handler (data) { this.data = data } } }
}
</script>
